<template>
  <nly-wrapper
    side-mini
    layout="fixed"
    wrapper-class="XXXX"
    container-class="zzz"
  >
    <nly-navbar
      :variant="navbar.variant"
      navbar-class="xxx"
      header
      :border="navbar.border"
      :size="navbar.size"
      :dark="navbar.dark"
    >
      <nly-navbar-nav class="xxxxx">
        <nly-nav-item v-nly-sidebar-collapse.navitem>
          <nly-icon icon="fas fa-bars" title="折叠/展开侧边栏" />
        </nly-nav-item>
      </nly-navbar-nav>
      <nly-navbar-nav class="ml-auto"></nly-navbar-nav>
    </nly-navbar>

    <nly-wrapper-sidebar :hover="sidebar.hover" :variant="sidebar.variant">
      <nly-sidebar-brand to :variant="sidebar.brand.variant">
        <nly-sidebar-brandimg :src="logo" elevation circle />
        <nly-sidebar-brandtext>开盲盒后台管理系统</nly-sidebar-brandtext>
      </nly-sidebar-brand>

      <nly-sidebar>
        <div @click="logout">
          <nly-sidebar-userpanel class="mt-3 pb-3 mb-3 d-flex">
            <nly-sidebar-userpanel-img :src="avatar" />
            <nly-sidebar-userpanel-info>{{
              nickname
            }}</nly-sidebar-userpanel-info>
          </nly-sidebar-userpanel>
        </div>
        <nly-sidebar-nav
          class="mt-2"
          :flat="sidebar.sidebarShape.flat"
          :pill="sidebar.sidebarShape.pill"
          :compact="sidebar.sidebarShape.compact"
          :legacy="sidebar.sidebarShape.legacy"
          :child-indent="sidebar.sidebarShape.childIndent"
          sidebar-nav-class="zzz"
        >
          <template v-for="(item, index) in menu">
            <nly-sidebar-nav-item
              v-if="item.children == undefined"
              :to="item.path"
              :icon="item.icon"
              exact
              :key="index"
              >{{ item.name }}</nly-sidebar-nav-item
            >

            <nly-sidebar-nav-tree
              v-if="item.children != undefined"
              :target="index + ''"
              :icon="item.icon"
              :text="item.name"
              :key="index"
            >
              <nly-sidebar-nav-item
                v-for="(level2, level2_idx) in item.children"
                :key="level2_idx"
                :to="level2.path"
                link-class="xxx zzz"
                class="sss"
                :icon="item.icon"
                exact
                >{{ level2.name }}</nly-sidebar-nav-item
              >
            </nly-sidebar-nav-tree>
          </template>
        </nly-sidebar-nav>
      </nly-sidebar>
    </nly-wrapper-sidebar>
    <nly-content-wrapper>
      <router-view />
    </nly-content-wrapper>

    <nly-overlay v-nly-sidebar-collapse.overlay sidebar />

    <nly-wrapper-footer :size="footerSizeSm">
      <strong>
        Copyright © 2020
        <a href></a>. </strong
      >All rights reserved.
      <div class="float-right d-none d-sm-inline-block">
        <b>Version</b> 0.0.2
      </div>
    </nly-wrapper-footer>
  </nly-wrapper>
</template>

<script>
import Cookies from "js-cookie";
import defaultAvatar from "../assets/image/admin.svg";
export default {
  data() {
    return {
      menu: [
        {
          name: "用户管理",
          icon: "nav-icon far nlyfont nly-icon-user-fill",
          path: "/account",
        },
        {
          name: "商品管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/goods",
        },
        {
          name: "盲盒系列管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/manghetype",
        },
        {
          name: "一番赏系列管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/onetype",
        },
        
         {
          name: "优惠卷管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/cuppon",
        },

        {
          name: "活动管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/activity"
        },

        {
          name: "任务管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/active",
        },
        
        {
          name: "商品分类管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/typelist",
        },
        {
          name: "轮播图管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/shopSwiper",
        },
        {
          name: "订单管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/order/goodorder",
        },
        {
          name: "我的陈列柜",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/order/classorder",
        },
          {
          name: "充值优惠管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/charge"
        },
        {
          name: "提现管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/shop/userWithDraw"
        },

        {
          name: "会员充值管理",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/member"
        },
         {
          name: "设置页",
          icon: "nav-icon far nlyfont nly-icon-setting-fill",
          path: "/setting/disclaimer"
        }
      ],

      logo: "",

      defaultAvatar1:
        '<svg t="1587142325360" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4231" width="128" height="128"><path d="M572.051456 10.302464c-6.699008-1.283072-13.237248-2.724864-20.15232-3.75296-81.990656-12.288-152.997888 1.442816-214.404096 30.703616C143.858688 108.179456 5.6576 294.11328 5.6576 512.328704c0 101.98528 30.287872 196.839424 82.189312 276.262912 19.953664 41.073664 43.169792 73.455616 69.308416 84.578304 91.256832 89.597952 216.27904 144.937984 354.282496 144.937984 279.323648 0 505.7792-226.455552 505.7792-505.7792C1017.216 253.531136 822.786048 40.254464 572.051456 10.302464zM511.4368 977.645568c-119.095296 0-227.817472-45.005824-310.204416-118.857728 26.611712-10.62912 54.943744-22.286336 81.082368-33.763328 42.241024-18.51392 51.34848-29.636608 93.945856-48.623616 0 0 4.46464-22.027264 2.865152-35.127296l33.329152 0c0 0 7.586816 4.46464 0-47.336448 0 0-40.620032-10.848256-42.556416-93.35296 0 0-30.50496 10.351616-32.361472-39.653376-1.26464-33.883136-27.324416-63.301632 10.156032-87.601152l-19.047424-51.80416c0 0-38.071296-209.106944 71.401472-178.38592-46.171136-55.635968 261.819392-111.271936 281.814016 65.21856 0 0 14.265344 95.287296 0 160.505856 0 0 44.967936-5.256192 14.898176 81.871872 0 0-16.478208 62.649344-41.88672 48.582656 0 0 4.169728 79.284224-35.837952 92.739584 0 0 2.865152 42.200064 2.865152 45.085696l38.091776 5.72928c0 0-5.710848 34.55488 0.9472 38.368256 0 0 45.184 31.17568 99.043328 45.085696 24.042496 6.222848 48.917504 13.710336 73.178112 21.69344C749.529088 928.212992 636.182528 977.645568 511.4368 977.645568z" p-id="4232" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path></svg>',
      avatar: "",
      nickname: "",
      navbar: {
        border: true,
        variant: "white",
        size: null,
        sizeSm: true,
        dark: false,
        variantOption: [
          "primary",
          "secondary",
          "success",
          "info",
          "warning",
          "danger",
          "lightblue",
          "navy",
          "olive",
          "lime",
          "fuchsia",
          "maroon",
          "blue",
          "indigo",
          "purple",
          "pink",
          "red",
          "bg-red",
          "orange",
          "yellow",
          "green",
          "teal",
          "cyan",
          "white",
          "gray",
          "graydark",
        ],
      },
      sidebar: {
        sidebarShape: {
          flat: false,
          pill: true,
          compact: false,
          legacy: false,
          childIndent: true,
        },
        brand: {
          variant: "dark",
          variantOption: [
            "primary",
            "secondary",
            "success",
            "info",
            "warning",
            "danger",
            "lightblue",
            "light",
            "dark",
            "navy",
            "olive",
            "lime",
            "fuchsia",
            "maroon",
            "blue",
            "indigo",
            "purple",
            "pink",
            "red",
            "bg-red",
            "orange",
            "yellow",
            "green",
            "teal",
            "cyan",
            "white",
            "gray",
            "graydark",
          ],
        },
        hover: true,
        variant: "darkPink",
        darkVariantOption: [
          {
            a: "darkPrimary",
            b: "primary",
          },
          {
            a: "darkWarning",
            b: "warning",
          },
          {
            a: "darkInfo",
            b: "info",
          },
          {
            a: "darkDanger",
            b: "danger",
          },
          {
            a: "darkSuccess",
            b: "success",
          },
          {
            a: "darkIndigo",
            b: "indigo",
          },
          {
            a: "darkLightblue",
            b: "lightblue",
          },
          {
            a: "darkNavy",
            b: "navy",
          },
          {
            a: "darkPurple",
            b: "purple",
          },
          {
            a: "darkFuchsia",
            b: "fuchsia",
          },
          {
            a: "darkPink",
            b: "pink",
          },
          {
            a: "darkMaroon",
            b: "maroon",
          },
          {
            a: "darkOrange",
            b: "orange",
          },
          {
            a: "darkLime",
            b: "lime",
          },
          {
            a: "darkTeal",
            b: "teal",
          },
          {
            a: "darkOlive",
            b: "olive",
          },
        ],
        lightVariantOption: [
          {
            a: "lightPrimary",
            b: "primary",
          },
          {
            a: "lightWarning",
            b: "warning",
          },
          {
            a: "lightInfo",
            b: "info",
          },
          {
            a: "lightDanger",
            b: "danger",
          },
          {
            a: "lightSuccess",
            b: "success",
          },
          {
            a: "lightIndigo",
            b: "indigo",
          },
          {
            a: "lightLightblue",
            b: "lightblue",
          },
          {
            a: "lightNavy",
            b: "navy",
          },
          {
            a: "lightPurple",
            b: "purple",
          },
          {
            a: "lightFuchsia",
            b: "fuchsia",
          },
          {
            a: "lightPink",
            b: "pink",
          },
          {
            a: "lightMaroon",
            b: "maroon",
          },
          {
            a: "lightOrange",
            b: "orange",
          },
          {
            a: "lightLime",
            b: "lime",
          },
          {
            a: "lightTeal",
            b: "teal",
          },
          {
            a: "lightOlive",
            b: "olive",
          },
        ],
      },
      body: {
        sizeSm: true,
      },
      controlSidebar: {
        size: true,
        sizeSm: true,
      },
      footer: {
        size: true,
        sizeSm: true,
      },
    };
  },
  computed: {
    navbarSizeSm() {
      return this.navbar.sizeSm;
    },
    bodySizeSm() {
      return this.body.sizeSm;
    },
    controlSidebarSizeSm() {
      return this.controlSidebar.size ? "sm" : null;
    },
    footerSizeSm() {
      return this.footer.size ? "sm" : null;
    },
  },
  watch: {
    bodySizeSm: function (newval, oldval) {
      if (newval !== oldval) {
        if (newval) {
          const bodyClass = document.body.className;
          if (bodyClass.indexOf("text-sm") == -1) {
            document.body.classList.add("text-sm");
          }
        } else {
          document.body.classList.remove("text-sm");
        }
      }
    },
    navbarSizeSm: function () {
      this.navbar.size = this.navbar.sizeSm ? "sm" : null;
    },
  },
  created() {
    const bodyClass = document.body.className;
    if (bodyClass.indexOf("text-sm") == -1) {
      document.body.classList.add("text-sm");
    }
    this.avatar = Cookies.get("avatar") || defaultAvatar;
    this.nickname = Cookies.get("nickname") || "管理员";
  },
  methods: {
    changeNavbarVariant(variant) {
      this.navbar.variant = variant;
    },
    changeSidebarVariant(variant) {
      this.sidebar.variant = variant;
    },
    changeSidebarBrandVariant(variant) {
      this.sidebar.brand.variant = variant;
    },

    navigate(path) {
      console.log(path);
    },

    logout() {
      let _this = this;
      this.$Modal.confirm({
        title: "提示",
        content: "确认要注销登录吗？",
        onOk() {
          _this.$router.push("/login");
        },
      });
    },
  },
};
</script>
<style>
.sidebar-dark-pink .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-pink .nav-sidebar > .nav-item > .nav-link.active {
  background: rgb(254, 94, 42) !important;
  color: #ffffff;
}
</style>